<template>
  <div>
    <div class="label">
    <div class="stand" v-for="(item,key) in lists " :key="key">{{item.context}}</div>
  </div>
  <div class="slider-wrap">
    <div class="headlines">
      <div class="allvideo">
        全部视频
        <span>></span>
      </div>
      <div class="allvideo-right" v-for="(item,key) in items" :key="key">{{item.context}}</div>
    </div>
    <div></div>
  </div>
  </div>
</template>

<script>
export default {
  name: "ErCarousel",
  data() {
    return {
      lists: [{ context: "视频" }, { context: "MV" }],
      items: [
        { context: "现场" },
        { context: "翻唱" },
        { context: "舞蹈" },
        { context: "听BGM" },
        { context: "MV" },
        { context: "生活" },
        { context: "游戏" },
        { context: "ACG音乐" },
        { context: "最佳饭制" }
      ]
    };
  },
  methods: {},
  mounted: function() {}
};
</script>
<style lang='scss' scoped>
@font-face {
  font-family: "iconfont"; /* Project id 2528550 */
  src: url("//at.alicdn.com/t/font_2528550_8eo6drkxr9b.woff2?t=1620717183679")
      format("woff2"),
    url("//at.alicdn.com/t/font_2528550_8eo6drkxr9b.woff?t=1620717183679")
      format("woff"),
    url("//at.alicdn.com/t/font_2528550_8eo6drkxr9b.ttf?t=1620717183679")
      format("truetype");
}
.slider-wrap {
  width: 100%;
  height: 100%;
  background: rgb(180, 180, 149);
  .headlines {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: white;
    margin-left: 300px;
    .allvideo-right {
      float:left;
      margin: auto 15px;
      font-size: 12px;
      color: rgba(88, 82, 82, 0.8);
    }
    .allvideo {
      width: 100px;
      float: left;
      margin-right: 700px;
      border: 1px solid rgba(46, 39, 39, 0.2);
      border-radius: 63px;
    }
  }
}
.label {
  display: inline-block;
  width: 100%;
  .stand {
    height: 40px;
    line-height: 40px;
    float: left;
    margin: 10px;
  }
}
</style>
